<template>
  <div class="resume-manage">
    <h2 class="page-title">📄 在线简历管理</h2>
    
    <el-card shadow="never" class="search-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="searchForm.name" placeholder="简历名称" clearable />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never">
      <el-table :data="tableData" v-loading="loading" border stripe>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="resume_name" label="简历名称" min-width="200" />
        <el-table-column prop="user_id" label="用户ID" width="100" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否分享" width="100">
          <template #default="{ row }">
            <el-tag :type="row.is_shared ? 'success' : 'info'">
              {{ row.is_shared ? '已分享' : '未分享' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="pagination.total > 0"
        class="pagination"
        :current-page="pagination.current"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, prev, pager, next"
        @current-change="handlePageChange"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const loading = ref(false)
const tableData = ref([])

const searchForm = reactive({
  name: ''
})

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

const loadData = async (page = 1) => {
  loading.value = true
  try {
    const params = new URLSearchParams({
      page: page.toString(),
      pageSize: pagination.pageSize.toString()
    })
    if (searchForm.name) params.append('name', searchForm.name)
    
    const res = await fetch(`http://localhost:7001/api/resumes?${params.toString()}`)
    const json = await res.json()
    console.log('简历列表响应:', json)
    if (json.code === 200) {
      console.log('简历数据:', json.data)
      tableData.value = json.data || []
      pagination.total = json.pagination?.total || 0
      pagination.current = page
    } else {
      console.error('简历列表错误:', json)
    }
  } catch (e) {
    console.error('获取简历列表失败:', e)
    ElMessage.error('获取简历列表失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => loadData(1)
const handleReset = () => {
  searchForm.name = ''
  loadData(1)
}
const handlePageChange = (page) => loadData(page)

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确定删除该简历吗？', '警告', {
      type: 'warning'
    })
    const res = await fetch(`http://localhost:7001/api/resumes/${row.id}`, {
      method: 'DELETE'
    })
    const json = await res.json()
    if (json.code === 200) {
      ElMessage.success('删除成功')
      loadData(pagination.current)
    } else {
      ElMessage.error(json.message || '删除失败')
    }
  } catch (e) {
    if (e !== 'cancel') {
      console.error('删除失败:', e)
      ElMessage.error('删除失败')
    }
  }
}

const getStatusType = (status) => {
  const typeMap = { 1: 'info', 2: 'warning', 3: 'success' }
  return typeMap[status] || ''
}

const getStatusText = (status) => {
  const textMap = { 1: '草稿', 2: '完成', 3: '已发布' }
  return textMap[status] || status
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  return new Date(dateString).toLocaleString('zh-CN')
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.resume-manage {
  padding: 20px;
}

.page-title {
  margin: 0 0 20px 0;
  font-size: 24px;
  color: #333;
}

.search-card {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>

